<template>
	<view class="user-box">
		<!-- <view class="tab-bar">
			<view style="width: 120upx; height: 60upx;position: absolute;text-align: center;top: 16upx;">
				<image :src="logo" mode="aspectFill" style="width: 50upx; height: 50upx;border-radius: 50%;"/>
			</view>
			<view style="flex: 1;text-align: center;">{{title}}</view>
    </view>-->
		<view class="userInfo">
			<view class="flex-box" style="flex: 1;height: 150upx;">
				<image class="avatar" :src="info.headUrl ? info.headUrl : '/static/logo/logo1024x1024.png'" @tap="uploadAvatar" />
				<view style="padding: 30upx;flex: 1;">
					<view class="name">{{ info.realname }}</view>
					<view class="dept">{{ info.deptName }}</view>
				</view>
				<image style="width: 44upx;height: 44upx;" src="../../static/icon/icon-edit.png" @click="goPerson" />
			</view>
		</view>
		<view style="height: 630upx;"></view>
		<view class="container">
			<view class="list-cell" @click="goSystem">
				<view class="icon"><image style="width: 40upx;height: 40upx;" src="../../static/icon/icon-info.png" /></view>
				<view style="flex: 1;">基本信息</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<view class="list-cell" @click="goRanking">
				<view class="icon"><image style="width: 38upx;height: 40upx;" src="../../static/icon/icon-ranking.png" /></view>
				<view style="flex: 1;">战绩排行</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<view class="list-cell" @click="goRecords">
				<view class="icon"><image style="width: 33upx;height: 40upx;" src="../../static/icon/icon-records.png" /></view>
				<view style="flex: 1;">考试记录</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<view class="list-cell" @click="goMistakes">
				<view class="icon"><image style="width: 37upx;height: 40upx;" src="../../static/icon/icon-mistakes.png" /></view>
				<view style="flex: 1;">我的错题</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<view class="list-cell" @click="goCollect">
				<view class="icon"><image style="width: 40upx;height: 40upx;" src="../../static/icon/icon-colle.png" /></view>
				<view style="flex: 1;">我的收藏</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<!-- 			<view class="list-cell" @click="goTrain">
				<view class="icon">
					<image style="width: 42upx;height: 40upx;" src="../../static/icon/icon-train-records.png" />
				</view>
				<view style="flex: 1;">培训记录</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
      </view>-->
			<view class="list-cell" @click="goCourse">
				<view class="icon"><image style="width: 40upx;height: 40upx;" src="../../static/img/kecheng.png" /></view>
				<view style="flex: 1;">我的课程</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
			<view class="list-cell" @click="goIntegral">
				<view class="icon"><image style="width: 40upx;height: 40upx;" src="../../static/img/integral.png" /></view>
				<view style="flex: 1;">积分中心</view>
				<image src="../../static/icon/icon-go.png" class="icon-go" />
			</view>
		</view>
		<!-- <view class="oauth-row">
			<text>煜哲科技提供技术支持</text>
			<text>丨</text>
			<text style="color: #46B7FD;">常见问题</text>
    </view>-->
		<view class="btn-row">
			<!-- <button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button> -->
			<button type="primary" class="primary" @tap="logout" style="border-radius: 50upx;font-size: 30upx;width: 500upx;">退出登录</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import uploader from '../../components/uploader/uploader';
import { setNavTitle } from '../../common/common';

import { post_md5 } from '../../common/request';

export default {
	computed: {
		...mapState(['hasLogin', 'forcedLogin'])
	},
	data() {
		return {
			// view: null,
			title: '',
			logo: '',
			info: {}
		};
	},
	onShow() {
		this.getTitleLogo();
		this.getUserInfo();
	},
	onPullDownRefresh() {
		this.getTitleLogo();
	},
	methods: {
		getTitleLogo() {
			// #ifdef APP-PLUS
			post_md5('/sys/tenantsysconfig/appinfo').then(res => {
				let data = JSON.parse(res.data);
				setNavTitle(data.centertitle);
			});
			// #endif
		},
		// 获取用户信息
		getUserInfo() {
			const params = {
				userId: uni.getStorageSync('userId')
			};
			post_md5('/usercenter-app/user/userbasicinfo', params).then(res => {
				this.info = res.data;
			});
		},

		// 上传头像
		async uploadAvatar() {
			var imageUrl = await uploader.uploadImage();
			if (imageUrl) {
				this.info.headUrl = imageUrl;

				await post_md5('/usercenter-app/user/editheadurl', {
					userId: uni.getStorageSync('userId'),
					headUrl: this.info.headUrl
				});
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
			}
		},

		goSystem() {
			uni.navigateTo({
				url: 'info-system'
			});
		},

		// 跳转基本信息
		goPerson() {
			uni.navigateTo({
				url: 'person'
			});
		},

		// 跳转战绩排行
		goRanking() {
			uni.navigateTo({
				url: '/pages/ranking-list/ranking-list'
			});
		},

		// 跳转考试记录
		goRecords() {
			uni.navigateTo({
				url: '/pages/exam-records/exam-cate'
			});
		},

		// 跳转我的错题
		goMistakes() {
			uni.navigateTo({
				url: '/pages/mistakes/mistakes'
			});
		},

		// 跳转我的收藏
		goCollect() {
			uni.navigateTo({
				url: '/pages/collect/collect'
			});
		},
		// 跳转我的课程
		goCourse() {
			uni.navigateTo({
				url: '/pages/course/courseMeList'
			});
		},
		// 跳转积分中心
		goIntegral() {
			uni.navigateTo({
				url: '/pages/integral/index'
			});
		},
		// 跳转培训记录
		goTrain() {
			uni.navigateTo({
				url: '/pages/train-records/records'
			});
		},

		bindLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		resetUser() {
			uni.setStorageSync('token', '');
			uni.setStorageSync('userId', '');
			uni.setStorageSync('checkAdd', '');
			uni.setStorageSync('tenantId', '');
			uni.setStorageSync('examIndex', 0);
			uni.setStorageSync('notice', []);
			uni.removeStorageSync('TimeDay');
			uni.reLaunch({
				url: '/pages/login/login'
			});
		},
		async logout() {
			await post_md5('/auth/logout', {
				token: uni.getStorageSync('token')
			}).then(res => {
				this.resetUser();
			});
			// .catch(e => {
			// 	console.log(e)
			// 	this.resetUser()
			// })
		}

		// bindLogout() {
		// 	this.logout();
		// 	/**
		// 	 * 如果需要强制登录跳转回登录页面
		// 	 */
		// 	if (this.forcedLogin) {
		// 		uni.reLaunch({
		// 			url: '/pages/login/login',
		// 		});
		// 	}
		// }
	}
};
</script>

<style>
.user-box {
	width: 100%;
}

.tab-bar {
	height: 120upx;
	line-height: 80upx;
	color: #fff;
	font-size: 32upx;
	width: 100%;
	background: #02a8f4;
	position: fixed;
	top: var(--status-bar-height);
	z-index: -1;
}

.userInfo {
	padding: 40upx 40upx 60upx 40upx;
	width: 100%;
	box-sizing: border-box;
	height: 300upx;
	display: flex;
	justify-content: space-between;
	color: #ffffff;
	background: url('');
	background-repeat: no-repeat;
	background-size: 100%;
}

.name {
	font-size: 28upx;
	font-weight: bold;
	line-height: 50upx;
}

.dept {
	font-size: 24upx;
	line-height: 40upx;
}

.avatar {
	width: 160upx;
	height: 160upx;
	border-radius: 50%;
	background: #ffffff;
}

.container {
	width: 610upx;
	font-size: 28upx;
	background: #ffffff;
	box-shadow: 0px 10px 10px 0px rgba(234, 234, 234, 1);
	border-radius: 6px;
	padding: 30upx 40upx;
	position: absolute;
	top: 250upx;
	left: 4%;
}

.list-cell {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 90upx;
}

.oauth-row {
	text-align: center;
	color: #cbcbcb;
	font-size: 24upx;
}

.icon {
	width: 40upx;
	height: 40upx;
	margin-right: 20upx;
	text-align: center;
}

.icon-go {
	width: 14upx;
	height: 26upx;
}
</style>
